<template>
	<view class="container">
		<view class="ui-all">
			<view class="avatar" @tap="avatarChoose">
				<view class="imgAvatar">
					<view class="iavatar"
					 :style="'background: url('+studentInfo.headImg+') no-repeat center/cover #eeeeee;'"></view>
				</view>
				<text>点击更换头像</text>
			</view>
			<view class="ui-list">
				<text>姓名</text>
				<input type="text" 
				:placeholder="value" 
				:value="studentInfo.name"
				 @input="bindnickName" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>联系方式</text>
				<input type="text" 
				:placeholder="value" 
				:value="studentInfo.mobile" 
				@input="bindnickName" placeholder-class="place" />
			</view>
			
			<view class="ui-list right">
				<text>年级</text>
				<input type="text"
				 :value="studentInfo.gradeInfoName"
				 :disabled="true"
				  placeholder-class="place" />
							
			</view>
						
			<view class="ui-list right">
				<text>性别</text>
				<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
					<view class="picker">
						{{sex[index].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>生日</text>
				<picker mode="date" :value="date" @change="bindDateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			
			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>

	</view>
</template>

<script>
	
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				studentInfo: {
					headImg: '',
					name: '',
					gradeInfoName: '一年级',
					gradeInfoId: null,
					sex: null,
					mobile: ''
				},
				
				sex: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				index: 0,
				avater: '/static/user/face.jpg',
				value: '请填写',
				
				region: ['请填写'],
				date: '请填写'
			}

		},
		
		computed: {
			...mapGetters({
				studentInfoCache: 'user/getStudentInfo',
				fileHost: 'common/fileHost'
			})
		},
		
		mounted () {
			this.studentInfo = {
				// headImg: '',
				name: this.studentInfoCache.name,
				gradeInfoName: this.studentInfoCache.gradeInfoName,
				sex: this.studentInfoCache.sex,
				mobile:  this.studentInfoCache.mobile
			}
			 
			if (this.studentInfoCache.headImg) {
				this.studentInfo.headImg = this.fileHost + this.studentInfoCache.headImg
			} else {
				this.studentInfo.headImg = '/static/user/face.jpg'
			}
		},
		
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value;
				
			},
			bindRegionChange(e) {
				this.region = e.detail.value;
				
			},
			bindDateChange(e) {
				this.date = e.detail.value;
				
			},
			bindnickName(e) {
				this.studentInfo.name = e.detail.value
			},
						
			bindmobile(e) {
				this.studentInfo.mobile = e.detail.value
			},
			binddescription(e) {
				this.description = e.detail.value;
				
			},
			avatarChoose() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						//console.log(JSON.stringify(res.tempFilePaths))
						this.imgUpload(res.tempFilePaths);
					}
				})
			},
			
			savaInfo() {
				if (!this.studentInfo.name) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.isPoneAvailable(this.studentInfo.mobile)) {
					
					uni.showToast({
						title: '手机号码有误，请重填',
						icon: 'none',
						duration: 2000
					});
					return;
				}
			},
			
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			
			async updata(datas) {
				//传后台
				
			},
			
			imgUpload(file) {
				this.$httpApi.upload('/api/upload/2', file)
				.then(res => {
					this.avater = this.fileHost + res.url
				})
			}
			
		},
		onLoad() {			
		}

	}
</script>

<style lang="less">
	.container {
			display: block;
			background: #FFFFFF;
		}
	
	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #ffffff;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
			/*	color: #8e8e93;*/
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {

				width: 20rpx;
				height: 20rpx;
				/*border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				!* IE 9 *!
				-moz-transform: rotate(45deg);
				!* Firefox *!
				-webkit-transform: rotate(45deg);
				!* Safari 和 Chrome *!
				-o-transform: rotate(45deg);*/
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #D0D0D0;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}
			button{
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;
				&::after{
					display: none;
				}
			}
			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				/*color: #999999;*/
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: rgb(0, 122, 255);
			border: none;
			color: #ffffff;
			line-height: 90rpx;
			margin-top: 40rpx;
			font-size: 30rpx;
		}
	}
</style>
